<template>
<div>

	<div class="main_banner">
			<img src="../assets/img/8.png" />
			
			<div class="main_banner_text">
				<p>STATE NO.9</p>
				<span>為你創造沙龍級美容體驗</span>
			</div>
	</div>
	
	<div class="main_page web-font">
		    
			<div class="main_kind">
				<el-row>
					<el-col :lg="14" :md="14"  :xs="24">
						<img src="../assets/img/2.png" />
					</el-col>
					
					<el-col :lg="10" :md="10" :xs="24" >
						
						<div class="main_banner_content">
							<div class="main_kind_text1">
								<header>“沙龍極享” 系列</header>
								<span>為你創造沙龍級美容體驗</span>
							</div>
							<div class="main_kind_text2">  採用全球最前沿的成分、概念、專利技術,<br/> ——全面呈現高端品質。<br/> 糅合芳療、概念按摩、美院黑科技 <br/>
								——打造身心雙層極致舒弛。{{msg}}   <br/>
							</div>
						</div>
					</el-col>
				</el-row>
			</div>
			<div class="main_kind">
				<el-row>
					<el-col :lg="10" :md="10" :xs="24">
						
						<div class="main_banner_content">
							<div class="main_kind_text1">
								<header>“創優完美”系列</header>
								<span>居家生活情趣風景線</span>
							</div>
							<div class="main_kind_text2">  囊括主流实用的季节单品，创造独特全新的升级使用体验。<br /> 坚持生产全程“9种无添加”。<br /> 原味MUJI风设计-[清甜风色彩]，为居家 拷贝  <br/>
							</div>
						</div>
						
					</el-col>
					
					<el-col :lg="14" :md="14" :xs="24" >
						<img src="../assets/img/1.png" />
					</el-col>
				</el-row>
			</div>
		    <div class="main_pro_story">
		    	<header>品牌故事</header>
		    	<div class="main_divider">
		    		<el-row>
		    			<el-col :lg="10" :sm="10" :xs="10"><hr size="1" color="#242424" width="100%" /></el-col>
		    			<el-col :lg="4" :sm="4" :xs="2"><span>BRAND STORY</span></el-col>
		    			<el-col :lg="10" :sm="10" :xs="10" ><hr size="1" color="#242424" width="100%"/></el-col>
		    		</el-row>
		    		
		    	</div>
		    	<div class="main_pro_story-content">
		    		<div>
			    		<el-row>
			    			<el-col :lg="24" :sm="24" :xs="24">
			    				<img src="../assets/img/3.png" />
			    			</el-col>
			    		</el-row>
		    		</div>
		    		<div class="main_pro_story_people">
			    		<el-row>
			    			<el-col :lg="10" :sm="10" :xs="10">
			    				<div style="padding-right: 60px;"><img src="../assets/img/10.png" /></div>
			    				
			    			</el-col>
			    			<el-col :lg="14"  :sm="14" :xs="14" >
			    				<div class="main_pro_story-text">
									<div class="main_pro_story-text1">
										<header>沉溺法系沙龍</header>
										<span>—吴国濠先生</span>
									</div>
									<div class="main_pro_story-text2">  
										2008年，美妆产品设计师吴国濠先生因参与产品研发沙龙旅居法国感慨于法国沙龙 的全球时尚领先的经典护肤理念，
										给女性带来的身心愉悦享受。法国在潮流圈内超前卫的美妆个护理念让这位产品设计师深为所动。
									</div>
								</div>
								<div class="main_pro_story-text">
									<div class="main_pro_story-text1">
										<header>“美院概念”</header>
										<span>—匠人理想</span>
									</div>
									<div class="main_pro_story-text2">  
										打造一个【美院概念】品牌的理想，已在心中生根。然而沙龙产品工艺要求极高，吴 先生寻遍多地找不到心中理想的生产工艺。
									</div>
								</div>
			    			</el-col>
			    		</el-row>
		    		</div>
		    		<div class="main_divider">
			    		<el-row>
			    			<el-col :lg="10" :sm="10" :xs="10" ><hr size="1" color="#242424" width="100%" /></el-col>
			    			<el-col :lg="4" :sm="4" :xs="4"><span>DISCOVER MORE</span></el-col>
			    			<el-col :lg="10" :sm="10" :xs="10" ><hr size="1" color="#242424" width="100%"/></el-col>
			    		</el-row>
			    		
			    	</div>
		    	</div>
		    </div>
			<div class="main_kind main_kind2">
				<el-row>
					<el-col :lg="12" :md="12" :xs="24" >
						<img src="../assets/img/5.png" />
					</el-col>
					
					<el-col :lg="12" :md="12" :xs="24" >
						
						<div class="main_banner_content">
							<div class="main_kind_text1">
								<header>創想家碰撞學術派</header>
								<span style="margin-left: 0;">“美院”享受帶回家</span>
							</div>
							<div class="main_kind_text2">  
								2015年，吴国濠先生找到资生堂前产品设计师谢松裕博士和他地处台湾、<br />
								 采用全套日系生产线理念的工艺产线。<br /> 
								 多年的行业经验告诉他，当年“把美容院的享受带回家的大胆设计，<br/>
								 终于遇到了可以完美实现它的人！{{msg}}  
							</div>
						</div>
					</el-col>
				</el-row>
			</div>
			<div class="main_kind main_kind2">
				<el-row>
					<el-col :lg="12" :md="12" :xs="24" >
						
						<div class="main_banner_content">
							<div class="main_kind_text1">
								<header>前沿美肌的[極享與宅]</header>
								<span style="margin-left: 0;">磨礪沉澱 光輝散發</span>
							</div>
							<div class="main_kind_text2"> 
								法国直递- 前端潮流圈内 [轻美院] 产品创意链<br />
								  日系台造-最具工艺性价比的世界工厂<br />
								    资生堂设计师操刀-“专家级”的配方比与工艺
							</div>
						</div>
						
					</el-col>
					
					<el-col :lg="12" :md="12" :xs="24">
						<img src="../assets/img/9.png" />
					</el-col>
				</el-row>
			</div>    
			<div class="main_kind">
				<el-row>
					<el-col :lg="24" :sm="24" :xs="24" >
						<img src="../assets/img/4.png"  width="100%"/>
					</el-col>
				</el-row>
			</div>
	</div>
</div>
</template>

<script>
	import Vue from 'vue'
	import 'element-ui/lib/theme-chalk/display.css';
	export default {
  	name:'Bmain',
  	mounted(){
  		this.tableData()
  		
  		if(this.$route.params.num==1){
  			var el = document.getElementsByClassName('main_pro_story')[0];
  			var elWidth = Number(el.offsetTop);
  			console.log(this.$route.params.num)
  			window.scrollTo(0, elWidth)
  			
  		}
    },
    
    data(){
    	return {
    		msg:1
    	}
    },
    methods:{
    	tableData(){
    		let self = this;
			this.msg="7";
    	}
    }
}
</script>

<style>
	.main_kind2{
		margin-top: 37px!important;
	}
	.main_pro_story_people{
		margin-top:50px;
		margin-bottom: 20px;
	}
	.main_pro_story-text{
		text-align: left;
		margin-bottom: 40px;
	}
	.main_pro_story-text2{
		font-size: 16px;
		margin-top: 20px;
	}
	.main_pro_story-text1 header{
		font-size: 34px;
		font-weight: bold;
		margin: 0;
		display: inline-block;
	}
	.main_pro_story-text1 span{
		font-size: 22px;
		margin-left: 30px;
	}
	.main_pro_story-content{
		margin-top: 40px;
	}
	.main_pro_story{
		text-align: center;
		margin-top: 100px;
	}
	.main_pro_story header{
		font-size: 28px;
		font-weight: bold;
		margin-bottom: 5px;
	}
	.main_divider span{
		font-size: 15px;
		font-weight: bold;
		position: relative;
		top: -3px;
	}
	.main_kind{
		margin-top: 100px;
	}
	.main_banner_content{
		margin-top: 30px;
	}
	.main_kind_text1{
		text-align: center;
		color: black;
	}
	.main_kind_text1 header{
		font-size: 34px;
		font-weight: bold;
		margin: 0;
		margin-bottom: 21px;
	}
	.main_kind_text1 span{
		font-size: 22px;
		margin-left: 30px;
		
	}
	.main_kind_text2{
		text-align: center;
		font-size: 14px;
		margin-top: 35px;
		color: #242424 ;
		line-height: 24px;
	}
	.main_banner{
		position: relative;
	}
	.main_banner img,.main_kind img,.main_pro_story img{
		width: 100%;
	}
	.main_banner_text{
		position: absolute;
		top: 280px;
		right: 100px;
		text-align: right;
		color: white;
	}
	.main_banner_text p{
		font-size: 90px;
		font-weight: bolder;
		margin: 0;
		
	}
	.main_banner_text span{
		font-size: 28px;
	}
	.main_page{
		width: 70%;
		margin-left: 15%;
	}
</style>